import { get_coordinate, set_coordinate } from "@/services/patient";
import { ActionType, ProForm, ProFormText } from "@ant-design/pro-components";
import { Button, Divider, Modal, message } from "antd"
import { useEffect, useState } from "react";

interface Iprops {
    isShowAddCoordinateModal: (show: boolean) => void;
    isAddCoordinateModalOpen: boolean;
    actionRef: React.MutableRefObject<ActionType | undefined>;
    id: number | undefined;
}
const AddCoordinate = (props: Iprops) => {
    const { isAddCoordinateModalOpen, isShowAddCoordinateModal, id, actionRef } = props
    // 存储坐标详情
    const [coordinateInfo,setCoordinateInfo]=useState<any>(undefined);

    // 页面初始化 获取旧坐标
    useEffect(()=>{
        const getData=async()=>{
            if(id){
                let res:any=await get_coordinate({id});
                if(res.code==200){
                    setCoordinateInfo(res.data)
                }
            }
        }
        getData();
    },[])

    // 添加坐标
    const add_coordinate=async(value:{coordinate:string})=>{
        console.log('value',value);
        let res:any=await set_coordinate({id,coordinate:value.coordinate});
        console.log('res',res);
        if(res.code==200){
            message.success('添加坐标成功！');
            actionRef.current?.reload();
            isShowAddCoordinateModal(false);
        }
    }
    return (
        <Modal
            title="添加坐标"
            centered
            open={isAddCoordinateModalOpen}
            onCancel={() => isShowAddCoordinateModal(false)}
            width={500}
            footer={null}
        >
            <Divider />
            {coordinateInfo==undefined?<></>: <ProForm
                layout="horizontal"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 15 }}
                onReset={() => isShowAddCoordinateModal(false)}
                onFinish={(value:{coordinate:string}) => add_coordinate(value)}
                submitter={{
                    // 配置按钮文本
                    searchConfig: {
                        resetText: '取消',
                        submitText: '提交',
                    },
                    resetButtonProps: {
                        style: {
                            display: 'block',
                            position: 'absolute',
                            left: 'calc(50% - 107px)',
                        },
                    },
                    submitButtonProps: {
                        style: {
                            display: 'block',
                            position: 'absolute',
                            right: 'calc(50% - 107px)',
                        },
                    },
                }}
            >
                <ProFormText
                    name="coordinate"
                    label="坐标（经纬度）"
                    placeholder="请输入坐标 用,隔开"
                    rules={[
                        { required: true, message: '请输入坐标' },
                        { pattern: /(^\S)((.)*\S)?(\S*$)/, message: '不能输入空格' },
                    ]}
                    initialValue={coordinateInfo.coordinate}
                />
                <br />
            </ProForm>}
           
            <br />
        </Modal>
    )
}
export default AddCoordinate;